import {
    Card,
    Breadcrumb,
    Form,
    Button,
    Radio,
    Input,
    Upload,
    Space,
    Select, message
} from "antd";
import {PlusOutlined} from '@ant-design/icons'
import {Link, useSearchParams} from 'react-router-dom'
import './index.scss'

import ReactQuill from "react-quill";
import 'react-quill/dist/quill.snow.css'

import {useEffect, useState} from "react";
import {createArticleAPI, getArticleById, updateArticleAPI} from "@/apis/article";
import {useChannel} from "@/hooks/useChannel";

const {Option} = Select

const Publish = () => {
    // 获取频道列表
    const {channelList} = useChannel()

    // 切换图片封面类型
    const [imageType, setImageType] = useState(0)
    const onTypeChange = (e) => {
        setImageType(e.target.value)
    }

    // 图片上传回调
    const [imageList, setImageList] = useState([])
    const onUploadChange = (value) => {
        console.log("正在上传中", value)
        setImageList(value.fileList)
    }

    // 提交表单
    const onFinish = (formValue) => {
        // 校验封面类型imageType是否和实际的图片列表imageList数量是相等的
        if (imageList.length !== imageType)
            return message.warning('封面类型和图片数量不匹配')

        const {title, content, channel_id} = formValue

        // 1. 按照接口文档的格式，处理收集到的表单数据
        const reqData = {
            title,
            content,
            cover: {
                type: imageType, // 封面模式
                images: imageList.map(item => {
                    if (item.response) {
                        return item.response.data.url
                    } else {
                        return item.url
                    }
                }) // 图片列表，分为新增、编辑两种情况进行处理
            },
            channel_id
        }

        // 2. 调用接口提交
        if (articleId) {
            updateArticleAPI({...reqData, id: articleId})
        } else {
            createArticleAPI(reqData)
        }
    }

    // 编辑文章回填数据
    const [searchParams] = useSearchParams()
    const articleId = searchParams.get('id')

    // 获取实例
    const [form] = Form.useForm()

    useEffect(() => {
        // 1. 通过id获取数据
        async function getArticleDetail() {
            if (!articleId) return
            const res = await getArticleById(articleId)
            const {cover} = res.data
            form.setFieldsValue({
                ...res.data,
                type: cover.type
            })
            setImageType(cover.type)
            setImageList(cover.images.map(url => {
                return {url}
            }))
        }
        // 2. 调用实例方法，完成回填
        getArticleDetail()
    }, [articleId, form])

    return (
        <div className="publish">
            <Card
                title={
                    <Breadcrumb items={[
                        {title: <Link to="/">首页</Link>},
                        {title: `${articleId ? '编辑' : '发布'}文章`}
                    ]}
                    />
                }
            >
                <Form
                    labelCol={{span: 4}}
                    wrapperCol={{span: 16}}
                    initialValues={{type: 0}}
                    onFinish={onFinish}
                    form={form}
                >
                    <Form.Item
                        label="标题"
                        name="title"
                        rules={[{required: true, message: '请输入文章标题'}]}
                    >
                        <Input placeholder="请输入文章标题" style={{width: 400}}/>
                    </Form.Item>
                    <Form.Item
                        label="频道"
                        name="channel_id"
                        rules={[{required: true, message: '请选择文章频道'}]}
                    >
                        <Select placeholder="请选择文章频道" style={{width: 400}}>
                            {/* value属性在用户选中之后会自动收集起来，作为接口的提交字段 */}
                            {channelList.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)}
                        </Select>
                    </Form.Item>
                    <Form.Item label="封面">
                        <Form.Item name="type">
                            <Radio.Group onChange={onTypeChange}>
                                <Radio value={1}>单图</Radio>
                                <Radio value={3}>三图</Radio>
                                <Radio value={0}>无图</Radio>
                            </Radio.Group>
                        </Form.Item>
                        {/*
                            listType: 决定选择文件框的外观样式
                            showUploadList: 控制显示上传列表
                        */}
                        {imageType > 0 &&
                            <Upload
                                name="image"
                                listType="picture-card"
                                showUploadList
                                action={"http://geek.itheima.net/v1_0/upload"}
                                onChange={onUploadChange}
                                maxCount={imageType}
                                fileList={imageList}
                            >
                                <div style={{marginTop: 8}}>
                                    <PlusOutlined/>
                                </div>
                            </Upload>
                        }
                    </Form.Item>

                    <Form.Item
                        label="内容"
                        name="content"
                        rules={[{required: true, message: '请输入文章内容'}]}
                    >
                        <ReactQuill
                            className="publish-quill"
                            theme="snow"
                            placeholder="请输入文章内容"
                        />
                    </Form.Item>

                    <Form.Item wrapperCol={{offset: 4}}>
                        <Space>
                            <Button size="large" type="primary" htmlType="submit">
                                发布文章
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default Publish